<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="../static/js/echarts.min.js"></script>

    <script src="../static/js/jquery-1.11.1.min.js"></script>
</head>

<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 100%;height:400px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 显示标题，图例和空的坐标轴
    var user=[];
    var count=[];
    var i_count=[];
    var title=[];
    var value=[];
    function getusers() {//图片分享率，按组份
        $.ajax({
            type: "get",
            url: "s_total.php",
            data: {},
            dataType: "json",
            success: function(result){
                //console.log(result)
                if(result){
                    //console.log("error");
                    for(var key in result.user){
                        user.push(key);
                        count.push(result.count[key]);
                        i_count.push(result.i_count[key]);
                        value.push(result.value[key]);
                    }
                    //title.push(result[i].title);
                }
            },
            error: function(errmsg) {
                alert("Ajax获取服务器数据出错了！"+ errmsg);
            }
        });
        console.log(user);
        return user,count,i_count,value;
    }
    getusers();
    function fetchData(cb) {
        // 通过 setTimeout 模拟异步加载
        setTimeout(function() {
            cb({
                //title:title,
                categories: user,
                data: count,
                data2:i_count,
                data3:value
            });
        }, 1000);
    }
  //  myChart.showLoading();
    fetchData(function(data) {
   //     myChart.hideLoading();
        myChart.setOption({
            title: {
                text: '图片分享率'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                },
//                formatter:'{b}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#C23531"></span>进群人数: {c0}<br/>' +
//                '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#2F4554"></span>图片分享数: {c1}<br/>' +
//                '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#9CC4C9"></span>分享率: {c2}%<br/>'
            },
            legend: {
                data: ['进群人数', '图片分享数'],
                align: 'right',
                right: 10
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                data: user
            }],
            yAxis: [{
                type: 'value',
                name: '数量',
                axisLabel: {
                    formatter: '{value}'
                }
            }],
            "dataZoom": [
                {
                    "show": true,
                    "height": 30,
                    "xAxisIndex": [
                        0
                    ],
                    bottom:0,
                    "start": 0,
                    "end": 80
                },
                {
                    "type": "inside",
                    "show": true,
                    "height": 15,
                    "xAxisIndex": [
                        0
                    ],
                    "start": 1,
                    "end": 35
                }
            ],
            series: [{
                name: '进群人数',
                type: 'bar',
                data:count
            }, {
                name: '图片分享数',
                type: 'bar',
                data:i_count
            },{
                name:'分享率',
                type:'line',
                data:value
            }
            ]
        });
    });
</script>
</body>

</html>